<template>
  <div>
    <div class="one">
      <span class="left"><van-icon name="search" size="20" class="one-icon" /></span> <span class="content">{{ city }}</span
      ><span v-if="msg" class="right" @click="right">我的|注册</span>
      <span v-else class="right1" @click="right"><van-icon name="contact" size="25"/></span>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
      <van-swipe-item>
        <div class="cate-root">
          <div v-for="(v, i) in category1" :key="i" class="cate" @click="Shoptype(v)">
            <img :src="img[i]" alt="" />
            <p>{{ v.title }}</p>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="cate-root">
          <div v-for="(v, k) in category2" :key="k" class="cate" @click="Shoptype(v)">
            <img :src="img2[k]" alt="" />
            <p>{{ v.title }}</p>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>


    <div class="shop-root">
      <p class="shop-p1"> <van-icon name="shop-o" size="14" /> 附近商家</p>
      <div v-for="(v, i) in shop" :key="i" class="shop-root-book">
        <div class="shop-left">
<!--          <img data-v-2df9c5b6="" src="164ad0b6a3917599.jpg" class="shop_img">-->
          <img data-v-2df9c5b6="" :src="'//elm.cangdu.org/img/'+v.image_path" class="shop_img"/>
        </div>
        <div class="shop-right" @click="Shopdetail(v)">
          <div class="shop-right-one">
            <span class="one-span1">品牌</span><h4>{{ v.name }}</h4
            ><span>保准票</span>
          </div>
          <div class="shop-right-two">
            <span><el-rate v-model="v.rating" disabled show-score text-color="#ff9900" score-template="{value}" class="xing"></el-rate></span>
            <span>月销售{{ v.recent_order_num }}单</span>
            <div class="right-two-div">
            <span>{{v.delivery_mode.text}}</span><span>准时达</span></div>
          </div>
          <div class="shop-right-shtte">
            <span
              >{{ v.float_minimum_order_amount }}元起送 /配送费{{
                v.float_delivery_fee
              }}元</span>
            <span>{{ v.distance }}</span><span>{{ v.order_lead_time }}/</span>
          </div>
        </div>
      </div>
    </div>
      <Ibottom></Ibottom>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Ibottom from "../components/Ibottom";
import {correctly} from '../../node_modules/vant';

export default {
  name: "Index",
    components: {Ibottom},
    computed: {
    ...mapState(["city"]),
      msg(){
        if (localStorage.user==undefined){
          return true;
        }else {
          return false;
        }
      }
  },
  data() {
    return {
      category1: "",
      category2: "",
      img: [
        "https://fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg",
        "https://fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg",
        "https://fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg",
        "https://fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg",
        "https://fuss10.elemecdn.com/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/7e/02b72b5e63c127d5bfae57b8e4ab1jpeg.jpeg"
      ],
      img2: [
        "https://fuss10.elemecdn.com/9/7c/9700836a33e05c2410bda8da59117jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg",
        "https://fuss10.elemecdn.com/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg",
        "https://fuss10.elemecdn.com/6/1a/1e0f448be0624c62db416e864d2afjpeg.jpeg",
        "https://fuss10.elemecdn.com/4/34/ea0d51c9608310cf41faa5de6b8efjpeg.jpeg",
        "https://fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg",
        "https://fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg"
      ],
      shop: "",
    };
  },
  created() {
    this.axios
      .get("https://elm.cangdu.org/v2/index_entry").then(data => {
        console.log(data.data);
        this.category1 = data.data.slice(0, 8);
        this.category2 = data.data.slice(8, data.data.length);
      })
      .catch(err => {
        console.log(err);
      });
    this.axios.get(
        "https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762"
      )
      .then(data => {
        console.log(data.data);
        this.shop = data.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    //详细点击
    Shopdetail(v) {
      // console.log(v,"wWiiWWI骄傲了房间as");
      this.$router.push({path:"/shopdetail",query:{id:v.id}})
    },
    //轮播点击
    Shoptype(v){
      // console.log(v,"wWiiWWI骄傲了房间as");
      this.$router.push({path:"/shoptype",query:{name:v.title}})
    },
    right(){
      if (localStorage.user==undefined){
        this.$router.push("/loin")
      }else {
        this.$router.push("/my")
      }
      // this.$router.push("/loin");
    }
  },
  comments:{
    correctly,
    Ibottom
  }
};
</script>

<style scoped>
  @import '../../node_modules/vant/lib/index.css';

  .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: white;
}
  .right1{
    float: right;
    margin-top:10px;
  }
.one {
  position: fixed;
  width: 96%;
  z-index: 999;
  background-color: cornflowerblue;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  color: white;
    padding-right: 2%;
    padding-left: 2%;
border: 0.1px solid transparent;

}
.my-swipe{
padding-top: 40px;
}
.one-icon{
    margin-top: 10px;
}
.one span {
  /*background-color: brown;*/
}

.content {
  font-size: 20px;
}

.cate-root {
  display: flex;
  flex-wrap: wrap;
  /*background-color: white;*/
}

.cate-root img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.cate {
  /*background-color: brown;*/
  width: 25%;
  line-height: 30px;
  /*height: 20px;*/
  /*background-color: #39a9ed;*/
}

.cate p {
  font-size: 10px;
  line-height: 40px;
  color: #666666;
}
.shop-root{
    background-color: #fff;
    margin-top: 10px;
}
.shop-p1{
    color: #999;
    font: .55rem/1.6rem Microsoft YaHei;
    padding-left: 10px;
    line-height: 40px;
    height: 40px;
    /*margin-bottom: 10px;*/
}
.shop-root-book {
  display: flex;
  margin-bottom: 10px;
  border-bottom: aliceblue 1px solid;
  justify-content: space-between;
  padding: 5px;
}
.shop-left{
  /* width: 25%; */
}
.shop-right{
width: 85%;
}
.shop-left img {
  width: 2.7rem;
  height: 2.7rem;
  display: block;
  margin-right: 0.4rem;
}
.shop-right span,.shop-right h4{           
display: inline-block;
}
.shop-right-one,.shop-right-two,.shop-right-shtte{
margin-bottom: 10px;
/* background-color: rgb(148, 45, 45); */
}
.shop-right-one span:nth-child(1){
    font-size: .5rem;
    line-height: .6rem;
    color: #333;
    background-color: #ffd930;
    padding: 0 .1rem;
    border-radius: .1rem;
    margin-right: .2rem;}
.shop-right-one h4:nth-child(2){
        width: 12rem;
    color: #333;
    padding-top: .01rem;
    font: 16px PingFangSC-Regular;
    font-weight: 700;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
     
.shop-right-one span:nth-child(3){
     /* background-color: rgb(67, 110, 252); */
     float:right;
     font-size: .5rem;
    color: #999;
}
/*.xing i{*/
/*    background-color: #3190e8;*/
/*}*/
.shop-right-two span:nth-child(1) i{
  
    font-size: 1px;
    margin-right: 0px;
    color: #C0C4CC;
    transition: .3s;

}
.shop-right-two span:nth-child(2){
       margin-left: 5px;
    font-size: .4rem;
    color: #666;
}.right-two-div span:nth-child(1){
    font-size: 4px;
        color: #fff;
    background-color: #3190e8;
    border: .025rem solid #3190e8;
    border-radius: 3px;
    /* float: right; */
}
.right-two-div span:nth-child(2){
    font-size: 4px;
        color:#3190e8;
    border-radius: 3px;
    border: .025rem solid #3190e8;
    margin-left: 2px;
    /* float: right; */
}
.right-two-div{
  float: right;
}
.shop-right-shtte span:nth-child(1),.shop-right-shtte span:nth-child(3),.shop-right-shtte span:nth-child(2){
    font-size: 4px;
}
.shop-right-shtte span:nth-child(2),.shop-right-shtte span:nth-child(3){
    float:right;
}
.shop-right-shtte span:nth-child(2){
     color:#3190e8;
}

  /deep/.el-rate__icon{
    font-size: 5px;
    margin: 0;
  }
  /deep/.van-swipe__indicator{
    background-color: rgb(5, 5, 5);
  }


</style>
